<template>
	<div class="contentWrap">
		<router-link class="contentItem" :to="{name:'video',params:{'aid':item.aid}}" v-for="(item,index) in content" :key="index" v-if="content">
			<div class="itemImg">
				<img src="../../assets/tv.png" class="loadPic" />
				<img v-lazy="item.pic"  class="itemPic"  />
				<div class="itemInfo">
					<div class="icon_bofangshu">
						<svg>
							<use xlink:href="#icon-bofangshu"></use>
						</svg>
					</div>
					<div class="bofangNum">
						<p v-if="!content">----</p>
						<p v-else>{{_initNum(item.play)}}</p>
					</div>
					<div class="icon_danmu">
						<svg>
							<use xlink:href="#icon-danmushu"></use>
						</svg>
					</div>
					<div class="danmuNum">
						<p v-if="!content">----</p>
						<p v-else>{{_initNum(item.video_review)}}</p>
					</div>
				</div>
			</div>
			<div class="itemTitle" v-if="content">
				{{item.title}}
			</div>
			<div class="itemTitle" v-else>
				加载中...
			</div>

		</router-link>
		
	</div>

</template>

<script>
	export default {
		data(){
			return {
				
			}
		},
		created(){
			
		},
		mounted(){
//			console.log(this)
		},
		methods:{
			_initNum(n){
				if(isNaN(n)){return "-"};
				return n=n>=10000?((n/10000).toFixed(1))+"万":n;
			}
		},
		props:{
			"content":{
				type:[Array,Object],
				default:()=>[],
			}
		},
		beforeUpdate(e){
			console.log("beforeUpdate",e)
		},
		beforeDestroy(){
			console.log("beforeDestroy")
			return 
		}
	}
</script>

<style lang="scss">
	@import "~@/common/scss/common";
	.contentWrap {
		position: relative;
		padding: 0 4px;
		&:after {
			content: "";
			display: block;
			clear: both;
		}
		.contentItem {
			width: 50%;
			position: relative;
			float: left;
			color:$fontcolor;
			margin-bottom: 6px;
			.itemImg {
				width: 93%;
				margin: auto;
				position: relative;
				border-radius:10px;
				overflow: hidden;
				z-index: 1;
				background-image: linear-gradient(transparent 50%, rgba(0, 0, 0, .5));
				.loadPic {
					display: block;
					width: 62%;
					margin: auto;
				}
				.itemPic {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
				}
			}
			.itemTitle {
				width: 93%;
				height: 32px;
				margin: auto;
				margin-top: 4px;
				font-size: 13px;
				line-height: 16px;
				overflow: hidden;
			}
			.itemInfo {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				display: flex;
				align-items: center;
				padding-left: 8px;
				background: linear-gradient(180deg,rgba(33,33,33,0),rgba(33,33,33,.5));
				div{
					margin-right: 3%;
				}
				.bofangNum,.danmuNum{
					flex-basis: 30%;
					white-space: nowrap;
					overflow: hidden;
				}
				p{
					color: #fff;
					font-size: 12px;
				}
			}
			.itemInfo div[class*='icon_'] {
				width: 15px;
				height: 15px;
				color: #fff;
				svg {
					display: block;
					width: 100%;
					height: 100%;
					fill: #fff;
				}
			}
		}
	}
</style>